<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select v-model="form.province" placeholder="请选择省" size="small" @change="cityFn">
          <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="form.city" placeholder="请选择市" size="small" @change="areaFn">
          <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="form.area" placeholder="请选择区" size="small">
          <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="3"><el-input v-model="form.plan_title" placeholder="请输入计划名称" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="form.school_title" placeholder="请输入学校名称关键字" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="form.t_id" placeholder="请输入帐号" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="form.real_name" placeholder="请输入学生姓名" size="small"></el-input></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <el-row v-if="this.menuList.includes('storeShoolEval')" class="btnBox">
      <el-col :span="2" :offset="18"><el-button type="primary" size="small">预警管理</el-button></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="selectSchool">添加预警</el-button></el-col>
      <el-col :span="2"><el-button size="small">导出</el-button></el-col>
    </el-row>
    <br>
    <el-row :gutter="24" class="centerTable">
      <el-table border :data="tableData" :menuList="this.menuList" :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading" @selection-change="handleSelectionChange">
        <!-- 多选按钮 -->
        <template v-if="tableConfig.checkout==true">
          <el-table-column type="selection" align="center" :selectable="selectable"></el-table-column>
        </template>
        <template v-for="(item, index) in tableConfig.config">
          <!-- 操作 -->
          <template v-if="item.prop === 'operation'">
            <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :fixed="item.fixed">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === 0 " @click="examine(scope.row, 'management', scope.$index)" type="text" size="small">预警管理</el-button><!-- 预警中 -->
                <el-button v-if="scope.row.status === 1 && scope.row.recheck_report_status === 1 " @click="examine(scope.row, 'management', scope.$index)" type="text" size="small">预警管理</el-button><!-- 已解除 && 复检 -->
                <el-button v-if="scope.row.status === 2 && scope.row.recheck_report_status === 1 " @click="examine(scope.row, 'management', scope.$index)" type="text" size="small">预警管理</el-button><!-- 转危机 && 复检 -->
                <el-button v-if="scope.row.status === 1 && scope.row.recheck_report_status === 0" @click="examine(scope.row, 'inspection', scope.$index)" type="text" size="small">复检报告</el-button><!-- 已解除 -->
                <el-button v-if="scope.row.status === 2 && scope.row.recheck_report_status === 0" @click="examine(scope.row, 'inspection', scope.$index)" type="text" size="small">复检报告</el-button><!-- 转危机 -->
                <el-button v-if="scope.row.mode === 0 " @click="examine(scope.row, 'personal', scope.$index)" type="text" size="small">个人报告</el-button><!-- 测评预警 -->
                <el-button v-if="scope.row.mode === 1 " @click="examine(scope.row, 'details', scope.$index)" type="text" size="small">查看详情</el-button><!-- 添加预警 -->
              </template>
            </el-table-column>
          </template>
          <!-- 内容 -->
          <template v-else>
            <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :formatter="item.formatter">
              <template slot-scope="scope">
                <div>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
    </el-row>
    <el-row :gutter="24" class="fr">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </el-row>
    <!-- 选择学校 -->
    <select-school v-if="this.isSelectSchool" :isSelectSchool="this.isSelectSchool" @noSelectSchool="noSelectSchool"></select-school>
    <!-- 添加预警 -->
    <add v-if="this.isAdd" :schoolId="this.schoolId" :isAdd="this.isAdd" @noAdd="noAdd"></add>
    <!-- 查看详情 -->
    <details-view v-if="this.isDetails" :isDetails="isDetails" :id="this.id" @noDetails="noDetails"></details-view>
    <!-- 预警管理 -->
    <management-view v-if="this.isManagement" :isManagement="isManagement" :id="this.id" @noManagement="noManagement"></management-view>
  </div>
</template>
<script>
import {APISCHOOLWHOLEREGION, APIEARLYWARNINGGETLIST} from '@/common/api.js'
import selectSchool from './components/selectSchool.vue'
import add from './components/add.vue'
import detailsView from './components/details.vue'
import managementView from './components/management.vue'
import downloadApi from '@/common/downloadApi.js'
export default {
  components: {selectSchool, add, detailsView, managementView},
  data () {
    return {
      Api: '',
      menuList: [],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      form: {
        province: '',
        city: '',
        area: '',
        plan_title: '',
        school_title: '',
        real_name: '',
        t_id: ''
      },
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: true, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '姓名',
            prop: 'real_name',
            align: 'center',
            width: '200'
          },
          {
            label: '账号',
            prop: 't_id',
            align: 'center',
            width: '200'
          },
          {
            label: '测评计划',
            prop: 'plan_title',
            align: 'center'
          },
          {
            label: '学校名称',
            prop: 'school_title',
            align: 'center',
            width: '100'
          },
          {
            label: '省份',
            prop: 'province',
            align: 'center',
            width: '100'
          },
          {
            label: '城市',
            prop: 'city',
            align: 'center',
            width: '100'
          },
          {
            label: '区/县',
            prop: 'area',
            align: 'center',
            width: '100'
          },
          {
            label: '学段',
            prop: 'section_title',
            align: 'center',
            width: '100'
          },
          {
            label: '年级',
            prop: 'grade_title',
            align: 'center',
            width: '200'
          },
          {
            label: '班级',
            prop: 'class_title',
            align: 'center'
          },
          {
            label: '测评计划',
            prop: 'plan_title',
            align: 'center'
          },
          {
            label: '预警方式',
            prop: 'mode_title',
            align: 'center'
          },
          {
            label: '问题程度',
            prop: 'problem_degree_title',
            align: 'center'
          },
          {
            label: '状态',
            prop: 'status_title',
            align: 'center'
          },
          {
            label: '问题类型',
            prop: 'question_type_title',
            align: 'center'
          },
          {
            label: '预警时间',
            prop: 'generation_time',
            align: 'center'
          },
          {
            prop: 'operation',
            label: '操作',
            fixed: 'right',
            width: '200',
            list: []
          }
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10,
      isSelectSchool: false,
      schoolId: '',
      isAdd: false,
      isDetails: false,
      isManagement: false
    }
  },
  created () {
    this.Api = downloadApi
    this.menuList = sessionStorage.getItem('list')
    this.getWholeRegion()
    this.tableList()
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      this.form.city = ''
      this.form.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.province
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      this.form.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.city
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    selectable (row, index) {
      // console.log(row, index)
    },
    handleSelectionChange (val) {
      this.goToDeleteSelect(val)
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APIEARLYWARNINGGETLIST(this.form).then((res) => {
        if (res.data) {
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          this.tableData = res.data.list
        } else {
          this.tableData = []
          this.total = 0
          this.currentPage = 0
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    searchFn () {
      this.tableList()
    },
    selectSchool () { // 选择学校
      this.isSelectSchool = true
    },
    noSelectSchool (list) {
      this.isSelectSchool = false
      if (list.type === 1) {
        this.schoolId = list.school
        this.addFn()
      }
    },
    addFn () {
      this.isAdd = true
    },
    noAdd (type) {
      if (type === 1) {
        this.tableList()
      }
      this.isAdd = false
    },
    examine (rows, id, index) {
      this.goToOperation({id: id, rows: rows, index: index})
    },
    goToOperation (val) { // 按钮
      if (val.id === 'details') { // 查看详情
        this.id = val.rows.id
        this.detailsFn()
      } else if (val.id === 'management') { // 预警管理
        this.id = val.rows.id
        this.managementFn()
      } else if (val.id === 'inspection') { // 复检报告
        window.open(this.Api + '/api/report/recheckReport?report_id=' + val.rows.id + '&token=' + window.sessionStorage.getItem('token'))
      } else if (val.id === 'personal') { // 个人报告
        window.open(this.Api + '/api/report/getRecommendIndividualReportView?report_id=' + val.rows.id + '&token=' + window.sessionStorage.getItem('token'))
      }
    },
    detailsFn () {
      this.isDetails = true
    },
    noDetails (type) {
      if (type === 1) {
        this.tableList()
      }
      this.isDetails = false
    },
    managementFn () {
      this.isManagement = true
    },
    noManagement (type) {
      if (type === 1) {
        this.tableList()
      }
      this.isManagement = false
    }
  }
}
</script>
